<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #tool{
            border:1px solid #ddd;
            background:#ccc;
            width:160px;
            padding:0px 10px;
            position:absolute;
        }
    </style>
</head>
<body>

    <a class="tool" href="#" title="我是标题">将鼠标移动到我上面哦</a>
    <script src="jquery/jquery-3.2.1.min.js"></script>
    <script>
        $(function()
        {
            var x=10;
            var y=20;
            var $title;
            $('a.tool').mouseover(function(e)
            {
                $title=$(this).title;
                $(this).title="";
                var boxdiv="<div id='tool'>这是一个新的标题</div>";
                $('body').append(boxdiv);
                $('#tool').css({
                    "left":(e.pageX+x)+"px",
                    "top":(e.pageY+y)+"px"
                }).show("fast");

            }).mouseout(function()
            {
                $(this).title=$title;
                $('#tool').remove();

            }).mousemove(function(e)
            {
                $('#tool').css({
                    "left":(e.pageX+x)+"px",
                    "top":(e.pageY+y)+"px"
                })
            });
        })
    </script>
</body>
</html>